<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品统计" name="first">
        <div style="margin-top:40px">
          <el-form :inline="true" :model="listQuery1" size="mini" label-width="100px">
            <el-form-item label="日期：">
              <el-date-picker
                v-model="listQuery1.inquiryDate"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="牌号：">
              <el-select v-model="listQuery1.kingGoodsId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="(item,index) in goodsList"
                  :key="index"
                  :label="item.goodsSn"
                  :value="item.kingId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList1()"
                type="primary">
                查询
              </el-button>
              <el-button
                :loading="btnLoading1"
                @click="downloadExcel()"
                type="primary">
                导出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <div style="font-size:14px;line-height: 40px">合计询价次数<span style="font-weight: bold;padding:0 5px">{{ inquiryCount }}</span>次，成交次数<span style="font-weight: bold;padding:0 5px">{{ orderCount }}</span>次，成交率：<span style="font-weight: bold;">{{ orderRate }}</span></div>
          <el-table
            v-loading="listLoading1"
            :data="tableData1"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="日期"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.inquiryDate}}
              </template>
            </el-table-column>
            <el-table-column  label="品类" min-width="100" prop="orderSn" align="center">
              <template slot-scope="scope">
                {{scope.row.goodsName}}
              </template>
            </el-table-column>
            <el-table-column
              label="牌号"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.goodsSn}}
              </template>
            </el-table-column>
            <el-table-column
              label="询价次数"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.inquiryCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="成交次数"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="成交率"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.orderRate}}
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        <div class="pagination-container">-->
<!--          <el-pagination-->
<!--            background-->
<!--            @size-change="handleSizeChange1"-->
<!--            @current-change="handleCurrentChange1"-->
<!--            layout="total, sizes,prev, pager, next,jumper"-->
<!--            :current-page.sync="listQuery1.pageNum"-->
<!--            :page-size="listQuery1.pageSize"-->
<!--            :page-sizes="[10,15,20]"-->
<!--            :total="count1">-->
<!--          </el-pagination>-->
<!--        </div>-->
      </el-tab-pane>
      <el-tab-pane label="业务员统计" name="second">
        <div style="margin-top:40px">
          <el-form :inline="true" :model="listQuery2" size="mini" label-width="100px">
            <el-form-item label="日期：">
              <el-date-picker
                v-model="listQuery2.inquiryDate"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="业务员：">
              <el-select v-model="listQuery2.userId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList2()"
                type="primary">
                查询
              </el-button>
              <el-button
                :loading="btnLoading2"
                @click="downloadExcel2()"
                type="primary">
                导出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <div style="font-size:14px;line-height: 40px">合计询价次数<span style="font-weight: bold;padding:0 5px">{{ inquiryCount2 }}</span>次，成交次数<span style="font-weight: bold;padding:0 5px">{{ orderCount2 }}</span>次，成交率：<span style="font-weight: bold;">{{ orderRate2 }}</span></div>
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="日期"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.inquiryDate}}
              </template>
            </el-table-column>
            <el-table-column  label="业务员" min-width="100" prop="orderSn" align="center">
              <template slot-scope="scope">
                {{scope.row.userName}}
              </template>
            </el-table-column>

            <el-table-column
              label="询价次数"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.inquiryCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="成交次数"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="成交率"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderRate}}
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        <div class="pagination-container">-->
<!--          <el-pagination-->
<!--            background-->
<!--            @size-change="handleSizeChange2"-->
<!--            @current-change="handleCurrentChange2"-->
<!--            layout="total, sizes,prev, pager, next,jumper"-->
<!--            :current-page.sync="listQuery2.pageNum"-->
<!--            :page-size="listQuery2.pageSize"-->
<!--            :page-sizes="[10,15,20]"-->
<!--            :total="count2">-->
<!--          </el-pagination>-->
<!--        </div>-->
      </el-tab-pane>
      <el-tab-pane label="时效统计" name="third">
        <div style="margin-top:40px">
          <el-form :inline="true" :model="listQuery3" size="mini" label-width="100px">
            <el-form-item label="日期：">
              <el-date-picker
                v-model="listQuery3.inquiryDate"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList3()"
                type="primary">
                查询
              </el-button>
              <el-button
                :loading="btnLoading3"
                @click="downloadExcel3()"
                type="primary">
                导出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <div style="font-size:14px;line-height: 40px">合计询价次数<span style="font-weight: bold;padding:0 5px">{{ inquiryCount }}</span>次，已报价：<span style="font-weight: bold">{{ offerCount }}</span>次，未报价：<span style="font-weight:bold">{{ unOfferCount }}</span>次 ，超时次数：<span style="font-weight:bold">{{ outTimeCount }}</span>次  ，超时率：<span style="font-weight:bold">{{ outTimeRate }}</span></div>
          <el-table
            v-loading="listLoading3"
            :data="tableData3"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="日期"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.inquiryDate}}
              </template>
            </el-table-column>


            <el-table-column
              label="询价次数"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.inquiryCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="已报价"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.offerCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="未报价"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.unOfferCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="超时次数"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.outTimeCount}}
              </template>
            </el-table-column>
            <el-table-column
              label="超时率"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.outTimeRate}}
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        <div class="pagination-container">-->
<!--          <el-pagination-->
<!--            background-->
<!--            @size-change="handleSizeChange3"-->
<!--            @current-change="handleCurrentChange3"-->
<!--            layout="total, sizes,prev, pager, next,jumper"-->
<!--            :current-page.sync="listQuery3.pageNum"-->
<!--            :page-size="listQuery3.pageSize"-->
<!--            :page-sizes="[10,15,20]"-->
<!--            :total="count3">-->
<!--          </el-pagination>-->
<!--        </div>-->
      </el-tab-pane>
    </el-tabs>


  </div>
</template>
<script>
import axios from 'axios'
import {getOrderUsersList,orderGoodsList,} from '@/api/partner'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
import {statisticsByGoods ,statisticsByUser,statisticsByDate} from "../../api/partner";

const defaultListQuery={
  "inquiryDate" : [], //#询价时间
  goodsKingId:'',
  "pageNum"  : 1,
  "pageSize" : 10
};

const defaultListQuery2={
  "inquiryDate" : [], //#询价时间
  userId:'',
  "pageNum"  : 1,
  "pageSize" : 10
};

const defaultListQuery3={
  "inquiryDate" : [], //#询价时间
  "pageNum"  : 1,
  "pageSize" : 10
};

export default {
  name: "index",
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery1: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData1: [],
      count1: 0,
      listLoading1: false,
      goodsList:[],
      userOptionList:[],
      activeName:'first',
      inquiryCount:'',
      orderCount:'',
      orderRate:'',
      btnLoading1:false,

      listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
      tableData2: [],
      count2: 0,
      listLoading2: false,
      inquiryCount2:'',
      orderCount2:'',
      orderRate2:'',
      btnLoading2:false,

      listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
      tableData3: [],
      count3: 0,
      listLoading3: false,
      inquiryCount3 :'',
      offerCount :'',
      outTimeCount :'',
      outTimeRate:'',
      unOfferCount:'',
      btnLoading3:false,
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    inquiryExport(){
      if(this.roles.indexOf("inquiryExport") != -1){
        return true
      }else{
        return false
      }
    },
  },
  created() {
    orderGoodsList().then((res)=>{
      this.goodsList = res.list
    })
    this.getUserOptionList();
    this.getList1();
    this.getList2();
    this.getList3();


  },
  filters: {

  },
  methods:{
    handleClick(){

    },

    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },

    //获取列表1
    getList1(){
      this.listLoading1 = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery1));
      statisticsByGoods(listQuery).then(response => {
        this.tableData1 = response.list;
        this.count1 = response.count;
        this.inquiryCount = response.inquiryCount;
        this.orderCount = response.orderCount;
        this.orderRate = response.orderRate;
        this.listLoading1 = false;
      }).catch(()=>{
        this.listLoading1 = false;
      });
    },

    handleSizeChange1(val){
      this.listQuery1.pageNum = 1;
      this.listQuery1.pageSize = val;
      this.getList1();
    },
    handleCurrentChange1(val){
      this.listQuery1.pageNum = val;
      this.getList1();
    },

    handleSearchList1(){
      this.listQuery1.pageNum = 1;
      this.getList1();
    },

    //下载excle
    downloadExcel(){
      let params = JSON.parse(JSON.stringify(this.listQuery1));
      params.isExport = 1;
      this.btnLoading1 = true;
      statisticsByGoods(params).then((res)=>{
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          this.btnLoading1 = false;
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
         this.btnLoading1 = true;
      })
    },

    //下载表格数据格式化
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },


    //获取列表2
    getList2(){
      this.listLoading2 = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery2));
      statisticsByUser(listQuery).then(response => {
        this.tableData2 = response.list;
        this.count2 = response.count;
        this.inquiryCount2 = response.inquiryCount;
        this.orderCount2 = response.orderCount;
        this.orderRate2 = response.orderRate;
        this.listLoading2 = false;
      }).catch(()=>{
        this.listLoading2 = false;
      });
    },

    handleSizeChange2(val){
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getList2();
    },
    handleCurrentChange2(val){
      this.listQuery2.pageNum = val;
      this.getList2();
    },

    handleSearchList2(){
      this.listQuery2.pageNum = 1;
      this.getList2();
    },

    //下载excle
    downloadExcel2(){
      let params = JSON.parse(JSON.stringify(this.listQuery2));
      params.isExport = 1;
      this.btnLoading2 = true;
      statisticsByUser(params).then((res)=>{
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          this.btnLoading2 = false;
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
        this.btnLoading2 = false;
      })
    },


    //获取列表3
    getList3(){
      this.listLoading3 = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery3));
      statisticsByDate(listQuery).then(response => {
        this.tableData3 = response.list;
        this.count3 = response.count;
        this.listLoading3 = false;
        this.inquiryCount3 = response.inquiryCount;
        this.offerCount = response.offerCount;
        this.outTimeCount = response.outTimeCount;
        this.outTimeRate = response.outTimeRate;
        this.unOfferCount = response.unOfferCount;
      }).catch(()=>{
        this.listLoading3 = false;
      });
    },

    handleSizeChange3(val){
      this.listQuery3.pageNum = 1;
      this.listQuery3.pageSize = val;
      this.getList3();
    },
    handleCurrentChange3(val){
      this.listQuery3.pageNum = val;
      this.getList3();
    },

    handleSearchList3(){
      this.listQuery3.pageNum = 1;
      this.getList3();
    },

    //下载excle
    downloadExcel3(){
      let params = JSON.parse(JSON.stringify(this.listQuery3));
      params.isExport = 1;
      this.btnLoading3 = true;
      statisticsByDate(params).then((res)=>{
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          this.btnLoading3 = false;
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
        this.btnLoading3 = false;
      })
    },



  },
}
</script>

<style scoped lang="scss">
.upload-div{
  text-align: center;
  position:relative;
  #upload{

    opacity: 0;
    position: absolute;
    z-index: 1;
    width:154px;
    height:40px
  }
}
.title-tab{
  border-radius: 8px;
  background: #eee;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
  padding: 0 5px;
  color: #666;
}
</style>
